<template>
  <div class="homebox">
    <headers></headers>

    <homebanner></homebanner>
    <homelist></homelist>
    <homenav></homenav>

    <!-- <tabbar></tabbar> -->

    <div class="newday">
      <div class="title">
        <h2>每日新品发售</h2>
        <p>买手优选新款，潮流抢先购不停</p>
      </div>
      <div class="newday_img">
        <div class="newday_img_left">
          <img src="../../assets/newday/t1.jpg" alt />
        </div>
        <div class="newday_img_right">
          <img src="../../assets/newday/t2.jpg" alt />
          <img src="../../assets/newday/t2.jpg" alt />
          <img src="../../assets/newday/t2.jpg" alt />
        </div>
      </div>
    </div>

    <p>热门新款</p>
    <div class="hot">
      <div>
        <img src="../../assets/newday/t3.jpg" alt />
      </div>
      <div>
        <img src="../../assets/newday/t3.jpg" alt />
      </div>
      <div>
        <img src="../../assets/newday/t3.jpg" alt />
      </div>
    </div>

    <h2>正在流行</h2>
    <p>女神你还差这件最新流行款</p>

    <!-- Popular 流行 -->
    <div class="Popular">
      <img src="../../assets/newday/t4.jpg" alt />
    </div>

    <div class="center">
      <ul>
        <li>
          <img src="../../assets/newday/t5.jpg" alt />
          <div>印花卫衣</div>
        </li>
        <li>
          <img src="../../assets/newday/t5.jpg" alt />
          <div>印花卫衣</div>
        </li>
        <li>
          <img src="../../assets/newday/t5.jpg" alt />
          <div>印花卫衣</div>
        </li>
        <li>
          <img src="../../assets/newday/t5.jpg" alt />
          <div>印花卫衣</div>
        </li>
        <li>
          <img src="../../assets/newday/t5.jpg" alt />
          <div>印花卫衣</div>
        </li>
        <li>
          <img src="../../assets/newday/t5.jpg" alt />
          <div>印花卫衣</div>
        </li>
        
      </ul>
    </div>
  </div>
</template>

<script>
import headers from "../../components/headers";
// import tabbar from "../../components/tabbar";
import homebanner from "./homebanner";
import homelist from "./homelist";
import homenav from "./homenav";

export default {
  props: {},
  data() {
    return {};
  },
  computed: {
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {
    headers,
    homebanner,
    homelist,
    homenav
    // tabbar
  }
};
</script>

<style scoped lang='less'>
.homebox {
  margin-bottom: 100px;
  .newday {
    .title {
      text-align: center;
      p {
        font-size: 13px;
      }
    }
    .newday_img {
      display: flex;
      .newday_img_left {
        flex: 6;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .newday_img_right {
        flex: 4;
        img {
          width: 100%;
        }
      }
    }
  }

  p {
    text-align: center;
    margin: 20px 0;
  }
  .hot {
    display: flex;
    div {
      flex: 1;
      img {
        width: 100%;
      }
    }
  }
  h2 {
    text-align: center;
    margin-top: 20px;
  }
  .Popular {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .center {
      width: 100%;
    ul {
        overflow: hidden;
      li {
        float: left;
        width: 33.3%;
        img {
          width: 100%;
        }
        div {
            text-align: center;
        }
      }
    }
  }
}
</style>
